<template>
  <div class="change-avatar-h5 has-header">
    <img :src="showPicture" class="change-avatar-img" ref="changeAvatarImg">
    <div @click.stop.prevent="changeAvatar" class="change-avatar-option touch-active">上传头像</div>
    <form id="changeAvatar" method="post" enctype="multipart/form-data" action="action">
      <input class="hideInput" type="file" name="file" ref="changeAvatar" accept="image/*" @change.stop.prevent="handleAvatar()">
      <!-- <input type="button" @click="formSubmit" value="提交"> -->
    </form>
    <!-- <div class="modal fade" id="changeAvatar">
      <div class="modal-dialog am-modal am-modal-normal">
        <div class="modal-content  text-center" v-show="!selectedImg">
          <div class="modal-header am-modal-hd">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title">更换头像</h4>
          </div>
          <div class="modal-body select-album-box">
            <input type="file" ref="imgFile" id="fileElem" accept="image/*" @change="handleFiles()">
            <div class="select-items" @click="selectClick">
              <div class="select-album">相册</div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-content-img" v-show="selectedImg">
        <div class="cropper-header">
          裁剪
          <div class="cropper-cancle cropper-cancle-confirm-common" href="javascript:;" data-dismiss="modal" aria-label="Close"><i class="fa fa-chevron-left fa-lg"></i></div>
          <div class="cropper-confirm cropper-cancle-confirm-common" href="javascript:;" data-dismiss="modal" aria-label="Close" @click="getCroppedCanvas">
            <span class="cropper-use">使用</span>
          </div>
        </div>
        <div id="imgContainer" class="imgContainer"></div>
        <div id="cImg"></div>
      </div>
    </div> -->
  </div>
</template>
<script>
export default {
  name: 'change-avatar-h5',
  props: {
    userPicture: {
      default: null
    }
  },
  data() {
    return {
      capturedPhoto: null
    }
  },
  computed: {
    showPicture() {
      return this.capturedPhoto ? this.capturedPhoto : this.userPicture
    }
  },
  methods: {
    changeAvatar() {
      this.$refs.changeAvatar.click()
    },
    handleAvatar() {
      var vm = this
      var input = this.$refs.changeAvatar
      var pic = input.files[0]
      if (pic.size >= 10 * 1024 * 1024) {
        // it.view.error('图片尺寸大于10M')
        alert('图片尺寸大于10M')
        return
      }
      if (window.URL) {
        vm.capturedPhoto = window.URL.createObjectURL(pic)
        this.$refs.changeAvatarImg.onload = function(e) {
          window.URL.revokeObjectURL(this.src) //图片加载后，释放object URL
          // _this.initCropper(); //文件读取完成时，初始化cropper
        }
      }
      /*var form = new FormData(document.getElementById('changeAvatar'));

      var config = {
        headers: {
          'Authorization': it.core.token(),
          'Content-Type': 'multipart/form-data'
        }
      };*/
      /* eslint-disable no-undef */
      /*var url = 'upload';
      if (internal.apiPrefix) {
        url = internal.apiPrefix + url;
      }*/
      /*axios.post(url, form, config).then(function(res) {
        if (res.data.code === '0000') {
          vm.identityPhotos[param]['address'] = res.data.data;
        }
        console.log(res);
        it.view.success('上传成功');
      }).catch(function(res) {
        console.log('error', res);
        it.view.error('上传失败'); // TODO: show clear error message according to error code
      });*/
    },
    formSubmit: function() {
      document.getElementById('changeAvatar').submit()
      // e.preventDefault()
    }
  }
}

</script>
<style scoped lang="scss" rel="stylesheet/scss">
.change-avatar-h5 {
  text-align: center;
}

.change-avatar-img {
  // max-width: 100%;
  width: 100%;
  max-width: 7.5rem;
  max-height: 7.5rem;
}

.change-avatar-option {
  margin: 0.6rem 0.8rem 0;
  height: 0.8rem;
  line-height: 0.8rem;
  background-color: #fff;
  border-radius: 3px;
  border: 1px solid #eee;
}
.hideInput {
  display: none;
}

</style>
